/**
  * @description: 网络错误页面
  * @author: yingying.fan
  * @date: 2019/3/5 9:25
  */
import React, { Component } from 'react'
import { StyleSheet, SafeAreaView, TouchableOpacity, Image, Text } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import NavigationService from './NavigationService'
import { isNetLink } from './NetUtils'

export default class NetErrorPage extends Component {
  _goToPage = () => {
    isNetLink().then(() => {
      let targetRouteName = this.props.navigation.getParam('targetRouteName', '')
      let targetParams = this.props.navigation.getParam('targetParams', null)
      NavigationService.replace(targetRouteName, targetParams)
    }).catch(() => {
    })
  }

  render () {
    return (
      <SafeAreaView style={styles.container}>
        <TouchableOpacity activeOpacity={0.8} style={styles.touch} onPress={this._goToPage}>
          <Image
            source={require('../../assets/img/net/network_error.png')}
            style={styles.netImage}/>
          <Text style={styles.netText}>网络连接失败,点击屏幕重试</Text>
        </TouchableOpacity>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  touch: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#f2f5f6'
  },
  netImage: {
    width: px2dp(521),
    height: px2dp(277),
    marginTop: px2dp(200)
  },
  netText: {
    color: '#C4CDCE',
    fontSize: px2dp(34),
    marginTop: px2dp(76)
  }
})